<template>
  <div class="page">
    <c-title :hide="false" text="易货详情"></c-title>
    <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" height="300"> -->
    <!-- <van-swipe-item v-for="(item, index) in bannerlist" :key="index"> -->
    <div class="img"><img :src="bannerlist.goods_pic" alt="" /></div>

    <!-- </van-swipe-item> -->
    <!-- </van-swipe> -->
    <div class="content">
      <div class="name">
        <div class="names">
          {{ data.name }}
        </div>
        <div class="price">
          ￥{{ data.goods_price * value}}
        </div>
      </div>

      <div class="bjq">
        <van-stepper v-model="value" theme="round" button-size="22" disable-input @change="changevalue" />
      </div>
    </div>
	<div class="spxq">商品详情</div>
    <div class="desc" v-html="data.goods_desc">
      <!-- {{}} -->
    </div>
    <div class="submit" @click="pro = true">兑换</div>
    <van-dialog v-model="pro" title="标题" show-cancel-button @confirm="dh" @cancel="pro = false">
      确定消耗{{ data.goods_price }}积分兑换{{ data.name }}吗？ </van-dialog>
  </div>
</template>

<script>
  import {
    Toast
  } from "vant";
  export default {
    data() {
      return {
        id: "",
        data: {},
        bannerlist: {},
        value: 1,
        pro: false
      };
    },
    activated() {
      this.id = this.$route.query.id;
      this.getdetail();
    },
    methods: {
      changevalue(e) {
        console.log(e);
      },
      dh(action, done) {
        $http
          .post("plugin.store-yihuo.frontend.store.yihuo.createorder", {
            goods_id: this.id,
            store_id: this.data.store_id,
            num: this.value
          })
          .then(response => {
            console.log(response);
            if (response.result === 1) {
              this.value = 1;
              $http
                .post("plugin.store-yihuo.frontend.store.yihuo.payorder", {
                  order_id: response.data.order_id
                })
                .then(response => {
                  if (response.result === 1) {
                    Toast(response.msg);
                    this.$router.go(-1);
                  } else {
                    Toast(response.msg);
                  }
                });
            } else {
              Toast(response.msg);
            }
          })
          .catch(error => {
            console.log(error);
          });
        return done(true);
      },
      getdetail() {
        $http
          .post("plugin.store-yihuo.frontend.store.yihuo.goodsinfo", {
            goods_id: this.id
          })
          .then(response => {
            console.log(response);
            if (response.result === 1) {
              this.data = response.data.info;
              this.bannerlist = response.data.info;
              console.log(this.bannerlist);
            } else {
              Toast(response.msg);
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    }
  };
</script>

<style scoped lang="scss">
  .submit {
    position: fixed;
    bottom: 0;
    background-color: #ff483d;
    color: #fff;
    width: 100%;
    text-align: center;
    line-height: 2rem;
  }
  .spxq{
	  margin-top: 1rem;
	  line-height: 2rem;
	  background-color: #fff;
  }
  .desc{
    background-color: #fff;
    text-align: left;
    padding: 0.5rem;
  }
  .content {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    padding: 0.5rem;

    // .bjq{
    // 	text-align: right;
    // 	padding: 0.5rem;
    // 	margin-top: 1rem;
    // }
    .name {
      background-color: #fff;
      text-align: left;
      font-size: 1rem;
      font-weight: 600;
      display: flex;

      .price {
        color: #f00;
      }

      .names {
        margin-right: 0.5rem;
      }
    }
  }

  .img {
    img {
      width: 100%;
      height: 100%;
    }
  }
</style>
